<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { queryDeviceStaff, transferWorkOrder } from '@/api/operation'
import { queryDeviceStaffResponseData } from '@/api/operation/types/operation'
import { getToken } from '@/utils/cache/cookies'
import { ElMessage, FormInstance } from 'element-plus'
const dialogVisible = ref<boolean>(false)
const form = reactive({
  receiverName: '',
  reason: '',
  workOrderId: '',
  staffId: '',
  deviceCode: ''
})
const formRef = ref<FormInstance | null>(null)
const receiver = ref<string>('')
const emit = defineEmits(['refresh'])
const deviceStaff = ref<null | queryDeviceStaffResponseData>(null)

const rule = reactive({
  receiverName: [{ required: true, message: '请选择当前接单人', trigger: 'blur' }],
  staffId: [{ required: true, message: '请选择转派人', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入转派原因', trigger: 'blur' }]
})

const queryStaff = async () => {
  try {
    const res = await queryDeviceStaff({
      token: getToken() ?? '',
      deviceCode: form.deviceCode
    })
    if (res.statusCode === '0') {
      deviceStaff.value = res.data
    }
  } catch (error) {
    console.error(error)
  }
}
const handleCascaderReceiverChange = () => {
  form.staffId = receiver.value
}
const open = () => {
  dialogVisible.value = true
}
const setData = (code: string, receiverName: string, id: string) => {
  form.deviceCode = code
  form.receiverName = receiverName
  form.workOrderId = id
  queryStaff()
}
defineExpose({
  open,
  setData
})
const reset = () => {
  formRef.value?.resetFields()
  dialogVisible.value = false
}
const submit = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      try {
        const res = await transferWorkOrder({
          token: getToken() ?? '',
          staffId: form.staffId,
          workOrderId: form.workOrderId,
          reason: form.reason
        })
        if (res.statusCode === '0') {
          ElMessage.success(res.data)
          reset()
          emit('refresh')
        }
      } catch (error) {
        console.error(error)
      }
    }
  })
}
</script>

<template>
  <el-dialog title="转派" width="500px" center v-model="dialogVisible">
    <el-form :model="form" ref="formRef" label-width="100px" :rules="rule">
      <el-form-item prop="receiverName" label="当前接单人">
        <el-input v-model="form.receiverName" disabled />
      </el-form-item>
      <el-form-item label="选择转派人" prop="staffId">
        <el-cascader
          v-model="receiver"
          :options="deviceStaff!!"
          separator="-"
          @change="handleCascaderReceiverChange"
          :props="{ emitPath: false, label: 'name', value: 'id', children: 'staffData' }"
        />
      </el-form-item>
      <el-form-item prop="reason" label="转派原因">
        <el-input
          v-model="form.reason"
          type="textarea"
          :autosize="{ minRows: 5 }"
          placeholder="请输入转派原因"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
:deep(.el-cascader) {
  width: 100%;
}
</style>
